<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="全部用户" name="first">
        <div style="margin:2% 0;display: inline-block;">
          <span>手机号:</span>
          <el-input
            style="width: 150px;"
            @keydown.enter.native="select"
            clearable
            placeholder="请输入手机号"
            v-model="phone"
          ></el-input>&nbsp;&nbsp;&nbsp;&nbsp;
          <span>登录名:</span>
          <el-input
            style="width: 150px;"
            @keydown.enter.native="select"
            clearable
            placeholder="请输入登录名"
            v-model="userName"
          ></el-input>&nbsp;&nbsp;&nbsp;&nbsp;
          <span>会员分类:</span>
          <el-select
            v-model="memberGrade"
            placeholder="会员分类"
            style="width:150px;"
            @change="selectTrigger(sort)"
          >
            <el-option
              v-for="item in members"
              :key="item.memberGrade"
              :label="item.memberName"
              :value="item.memberGrade"
            ></el-option>
          </el-select>&nbsp;&nbsp;&nbsp;&nbsp;
          <span>排序:</span>
          <el-select
            v-model="sort"
            placeholder="请选择排序方式"
            style="width:150px;"
            @change="selectTrigger(sort)"
          >
            <el-option
              v-for="item in sorts"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div style="display: inline-block;">
          <el-button
            style="margin-left:15px;"
            size="mini"
            type="primary"
            icon="document"
            @click="select"
          >查询</el-button>
          <el-button
            style="margin-left:15px;"
            size="mini"
            type="primary"
            icon="document"
            @click="cleans"
          >重置</el-button>
          <el-button
            style="margin-left:15px;"
            size="mini"
            type="primary"
            icon="document"
            @click="refresh"
          >刷新</el-button>
        </div>
        <el-table v-loading="tableDataLoading" :data="tableData.content">
          <el-table-column prop="userId" label="编号"></el-table-column>
          <el-table-column prop="headImg" label="头像" width="120">
            <template slot-scope="scope">
              <div v-if="scope.row.headImg == '' || scope.row.headImg == null">
                <img src="~@/assets/img/avatar.png" alt width="60" height="60" />
              </div>
              <div v-else>
                <img :src="scope.row.headImg" alt width="60" height="60" />
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="userName" label="登录名">
            <template slot-scope="scope">
              <span>{{ scope.row.userName ? scope.row.userName : '未设置' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="nickName" label="微信昵称">
            <template slot-scope="scope">
              <span>{{ scope.row.nickName ? scope.row.nickName : '未授权' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="relationId" label="会员编号">
            <template slot-scope="scope">
              <span>{{ scope.row.isInvitation === 0 ? '未授权' : scope.row.relationId ? scope.row.relationId : '未绑定' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="invitation" label="邀请人" width="120">
            <template slot-scope="scope">
              <span
                style="color: #4f9dec;cursor: pointer;"
                @click="updates(scope.row)"
              >{{ scope.row.invitation ? scope.row.invitation : '未设置' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="手机号" width="150">
            <template slot-scope="scope">
              <span
                style="color: #4f9dec;cursor: pointer;"
                @click="updates(scope.row)"
              >{{ scope.row.phone ? scope.row.phone : '未绑定' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="isVirtualUser" label="是否系统用户" width="150">
            <template slot-scope="scope">
              <span v-if="scope.row.isVirtualUser == 'true'">是</span>
              <span v-else>否</span>
            </template>
          </el-table-column>
          <el-table-column prop="weChatId" label="微信号" width="120">
            <template slot-scope="scope">
              <span>{{ scope.row.weChatId ? scope.row.weChatId : '未授权' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="members" label="会员等级" width="100"></el-table-column>
          <el-table-column prop="weChatId" label="会员到期时间" width="160">
            <template slot-scope="scope">
              <span>{{ scope.row.memberTimeEnd ? scope.row.memberTimeEnd : '无' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="gradeIndex" label="团长等级" width="100">
            <template slot-scope="scope">
              <span>{{ gradeLevelToText(scope.row.gradeIndex) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="注册时间" width="160"></el-table-column>
          <el-table-column prop="money" label="钻石"></el-table-column>
          <el-table-column prop="jiFen" label="金币"></el-table-column>
          <el-table-column fixed="right" prop="status " label="状态">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                @change="change(scope.row.status, scope.row.userId)"
                :active-value="openValue"
                :inactive-value="closeValue"
                active-color="#13ce66"
                inactive-color="#ff4949"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="100">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="updates(scope.row)">用户详情</el-button>
              <el-button size="mini" type="primary" @click="amendGrade(scope.row)">修改团长</el-button>
              <el-button size="mini" type="primary" @click="amendMember(scope.row)">修改会员</el-button>
              <el-button
                :disabled="!isAuth('userList:delete')"
                size="mini"
                type="danger"
                @click="deleteuser(scope.row)"
              >删除用户</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="text-align: center;margin-top: 10px;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="size"
            :current-page="page"
            layout="total,sizes, prev, pager, next"
            :total="tableData.totalElements"
          ></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="普通用户" name="putong">
        <div style="margin:2% 0;display: inline-block;">
          <span>手机号:</span>
          <el-input
            style="width: 150px;"
            @keydown.enter.native="select"
            clearable
            placeholder="请输入手机号"
            v-model="phone"
          ></el-input>&nbsp;&nbsp;&nbsp;&nbsp;
          <span>登录名:</span>
          <el-input
            style="width: 150px;"
            @keydown.enter.native="select"
            clearable
            placeholder="请输入登录名"
            v-model="userName"
          ></el-input>&nbsp;&nbsp;&nbsp;&nbsp;
          <span>排序:</span>
          <el-select
            v-model="sort"
            placeholder="请选择排序方式"
            style="width:150px;"
            @change="selectTrigger(sort)"
          >
            <el-option
              v-for="item in sorts"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div style="display: inline-block;">
          <el-button
            style="margin-left:15px;"
            size="mini"
            type="primary"
            icon="document"
            @click="select"
          >查询</el-button>
          <el-button
            style="margin-left:15px;"
            size="mini"
            type="primary"
            icon="document"
            @click="cleans"
          >重置</el-button>
          <el-button
            style="margin-left:15px;"
            size="mini"
            type="primary"
            icon="document"
            @click="refresh"
          >刷新</el-button>
        </div>
        <el-table v-loading="tableDataLoading" :data="tableData.content">
          <el-table-column prop="userId" label="编号"></el-table-column>
          <el-table-column prop="headImg" label="头像" width="120">
            <template slot-scope="scope">
              <div v-if="scope.row.headImg == '' || scope.row.headImg == null">
                <img src="~@/assets/img/avatar.png" alt width="60" height="60" />
              </div>
              <div v-else>
                <img :src="scope.row.headImg" alt width="60" height="60" />
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="userName" label="登录名">
            <template slot-scope="scope">
              <span>{{ scope.row.userName ? scope.row.userName : '未设置' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="nickName" label="微信昵称">
            <template slot-scope="scope">
              <span>{{ scope.row.nickName ? scope.row.nickName : '未授权' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="relationId" label="会员编号">
            <template slot-scope="scope">
              <span>{{ scope.row.isInvitation === 0 ? '未授权' : scope.row.relationId ? scope.row.relationId : '未绑定' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="invitation" label="邀请人" width="120">
            <template slot-scope="scope">
              <span
                style="color: #4f9dec;cursor: pointer;"
                @click="updates(scope.row)"
              >{{ scope.row.invitation ? scope.row.invitation : '未设置' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="手机号" width="150">
            <template slot-scope="scope">
              <span
                style="color: #4f9dec;cursor: pointer;"
                @click="updates(scope.row)"
              >{{ scope.row.phone ? scope.row.phone : '未绑定' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="isVirtualUser" label="是否系统用户" width="150">
            <template slot-scope="scope">
              <span v-if="scope.row.isVirtualUser == 'true'">是</span>
              <span v-else>否</span>
            </template>
          </el-table-column>
          <el-table-column prop="weChatId" label="微信号" width="150">
            <template slot-scope="scope">
              <span>{{ scope.row.weChatId ? scope.row.weChatId : '未授权' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="members" label="会员等级" width="100"></el-table-column>
          <el-table-column prop="weChatId" label="会员到期时间" width="120">
            <template slot-scope="scope">
              <span>{{ scope.row.memberTimeEnd ? scope.row.memberTimeEnd : '无' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="gradeIndex" label="团长等级" width="100">
            <template slot-scope="scope">
              <span>{{ gradeLevelToText(scope.row.gradeIndex) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="注册时间" width="160"></el-table-column>
          <el-table-column prop="money" label="钻石"></el-table-column>
          <el-table-column prop="jiFen" label="金币"></el-table-column>
          <el-table-column fixed="right" prop="status " label="状态">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                @change="change(scope.row.status, scope.row.userId)"
                :active-value="openValue"
                :inactive-value="closeValue"
                active-color="#13ce66"
                inactive-color="#ff4949"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="100">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="updates(scope.row)">用户详情</el-button>
              <el-button size="mini" type="primary" @click="amendGrade(scope.row)">修改团长</el-button>
              <el-button size="mini" type="primary" @click="amendMember(scope.row)">修改会员</el-button>
              <el-button
                :disabled="!isAuth('userList:delete')"
                size="mini"
                type="danger"
                @click="deleteuser(scope.row)"
              >删除用户</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="text-align: center;margin-top: 10px;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="size"
            :current-page="page"
            layout="total,sizes, prev, pager, next"
            :total="tableData.totalElements"
          ></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="会员用户" name="huiyuan">
        <div style="margin:2% 0;display: inline-block;">
          <span>手机号:</span>
          <el-input
            style="width: 150px;"
            @keydown.enter.native="select"
            clearable
            placeholder="请输入手机号"
            v-model="phone"
          ></el-input>&nbsp;&nbsp;&nbsp;&nbsp;
          <span>登录名:</span>
          <el-input
            style="width: 150px;"
            @keydown.enter.native="select"
            clearable
            placeholder="请输入登录名"
            v-model="userName"
          ></el-input>&nbsp;&nbsp;&nbsp;&nbsp;
          <span>会员分类:</span>
          <el-select
            v-model="memberGrade"
            placeholder="会员分类"
            style="width:150px;"
            @change="selectTrigger(sort)"
          >
            <el-option
              v-for="item in members"
              :key="item.memberGrade"
              :label="item.memberName"
              :value="item.memberGrade"
            ></el-option>
          </el-select>&nbsp;&nbsp;&nbsp;&nbsp;
          <span>排序:</span>
          <el-select
            v-model="sort"
            placeholder="请选择排序方式"
            style="width:150px;"
            @change="selectTrigger(sort)"
          >
            <el-option
              v-for="item in sorts"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div style="display: inline-block;">
          <el-button
            style="margin-left:15px;"
            size="mini"
            type="primary"
            icon="document"
            @click="select"
          >查询</el-button>
          <el-button
            style="margin-left:15px;"
            size="mini"
            type="primary"
            icon="document"
            @click="cleans"
          >重置</el-button>
          <el-button
            style="margin-left:15px;"
            size="mini"
            type="primary"
            icon="document"
            @click="refresh"
          >刷新</el-button>
        </div>
        <el-table v-loading="tableDataLoading" :data="tableData.content">
          <el-table-column prop="userId" label="编号"></el-table-column>
          <el-table-column prop="headImg" label="头像" width="120">
            <template slot-scope="scope">
              <div v-if="scope.row.headImg == '' || scope.row.headImg == null">
                <img src="~@/assets/img/avatar.png" alt width="60" height="60" />
              </div>
              <div v-else>
                <img :src="scope.row.headImg" alt width="60" height="60" />
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="userName" label="登录名">
            <template slot-scope="scope">
              <span>{{ scope.row.userName ? scope.row.userName : '未设置' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="nickName" label="微信昵称">
            <template slot-scope="scope">
              <span>{{ scope.row.nickName ? scope.row.nickName : '未授权' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="relationId" label="会员编号">
            <template slot-scope="scope">
              <span>{{ scope.row.isInvitation === 0 ? '未授权' : scope.row.relationId ? scope.row.relationId : '未绑定' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="invitation" label="邀请人" width="120">
            <template slot-scope="scope">
              <span
                style="color: #4f9dec;cursor: pointer;"
                @click="updates(scope.row)"
              >{{ scope.row.invitation ? scope.row.invitation : '未设置' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="手机号" width="150">
            <template slot-scope="scope">
              <span
                style="color: #4f9dec;cursor: pointer;"
                @click="updates(scope.row)"
              >{{ scope.row.phone ? scope.row.phone : '未绑定' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="isVirtualUser" label="是否系统用户" width="150">
            <template slot-scope="scope">
              <span v-if="scope.row.isVirtualUser == 'true'">是</span>
              <span v-else>否</span>
            </template>
          </el-table-column>
          <el-table-column prop="weChatId" label="微信号" width="120">
            <template slot-scope="scope">
              <span>{{ scope.row.weChatId ? scope.row.weChatId : '未授权' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="members" label="会员等级" width="100"></el-table-column>
          <el-table-column prop="weChatId" label="会员到期时间" width="120">
            <template slot-scope="scope">
              <span>{{ scope.row.memberTimeEnd ? scope.row.memberTimeEnd : '无' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="gradeIndex" label="团长等级" width="100">
            <template slot-scope="scope">
              <span>{{ gradeLevelToText(scope.row.gradeIndex) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="注册时间" width="160"></el-table-column>
          <el-table-column prop="money" label="钻石"></el-table-column>
          <el-table-column prop="jiFen" label="金币"></el-table-column>
          <el-table-column fixed="right" prop="status " label="状态">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                @change="change(scope.row.status, scope.row.userId)"
                :active-value="openValue"
                :inactive-value="closeValue"
                active-color="#13ce66"
                inactive-color="#ff4949"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="100">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="updates(scope.row)">用户详情</el-button>
              <el-button size="mini" type="primary" @click="amendGrade(scope.row)">修改团长</el-button>
              <el-button size="mini" type="primary" @click="amendMember(scope.row)">修改会员</el-button>
              <el-button
                :disabled="!isAuth('userList:delete')"
                size="mini"
                type="danger"
                @click="deleteuser(scope.row)"
              >删除用户</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="text-align: center;margin-top: 10px;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="size"
            :current-page="page"
            layout="total,sizes, prev, pager, next"
            :total="tableData.totalElements"
          ></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="系统用户" name="fifth">
        <div style="margin:2% 0;display: inline-block;">
          <span>手机号:</span>
          <el-input
            style="width: 150px;"
            @keydown.enter.native="select"
            clearable
            placeholder="请输入手机号"
            v-model="phone"
          ></el-input>&nbsp;&nbsp;&nbsp;&nbsp;
          <span>登录名:</span>
          <el-input
            style="width: 150px;"
            @keydown.enter.native="select"
            clearable
            placeholder="请输入登录名"
            v-model="userName"
          ></el-input>&nbsp;&nbsp;&nbsp;&nbsp;
          <span>会员分类:</span>
          <el-select
            v-model="memberGrade"
            placeholder="会员分类"
            style="width:150px;"
            @change="selectTrigger(sort)"
          >
            <el-option
              v-for="item in members"
              :key="item.memberGrade"
              :label="item.memberName"
              :value="item.memberGrade"
            ></el-option>
          </el-select>&nbsp;&nbsp;&nbsp;&nbsp;
          <span>排序:</span>
          <el-select
            v-model="sort"
            placeholder="请选择排序方式"
            style="width:150px;"
            @change="selectTrigger(sort)"
          >
            <el-option
              v-for="item in sorts"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div style="display: inline-block;">
          <el-button
            style="margin-left:15px;"
            size="mini"
            type="primary"
            icon="document"
            @click="select"
          >查询</el-button>
          <el-button
            style="margin-left:15px;"
            size="mini"
            type="primary"
            icon="document"
            @click="cleans"
          >重置</el-button>
          <el-button
            style="margin-left:15px;"
            size="mini"
            type="primary"
            icon="document"
            @click="refresh"
          >刷新</el-button>
          <el-button
            style="margin-left:15px;"
            size="mini"
            type="primary"
            icon="document"
            @click="inviteadd"
          >添加用户</el-button>
        </div>
        <el-table v-loading="tableDataLoading" :data="tableData.content">
          <el-table-column prop="userId" label="编号"></el-table-column>
          <el-table-column prop="headImg" label="头像" width="120">
            <template slot-scope="scope">
              <div v-if="scope.row.headImg == '' || scope.row.headImg == null">
                <img src="~@/assets/img/avatar.png" alt width="60" height="60" />
              </div>
              <div v-else>
                <img :src="scope.row.headImg" alt width="60" height="60" />
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="userName" label="登录名">
            <template slot-scope="scope">
              <span>{{ scope.row.userName ? scope.row.userName : '未设置' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="nickName" label="微信昵称">
            <template slot-scope="scope">
              <span>{{ scope.row.nickName ? scope.row.nickName : '未授权' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="relationId" label="会员编号">
            <template slot-scope="scope">
              <span>{{ scope.row.isInvitation === 0 ? '未授权' : scope.row.relationId ? scope.row.relationId : '未绑定' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="invitation" label="邀请人" width="120">
            <template slot-scope="scope">
              <span
                style="color: #4f9dec;cursor: pointer;"
                @click="updates(scope.row)"
              >{{ scope.row.invitation ? scope.row.invitation : '未设置' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="手机号" width="150">
            <template slot-scope="scope">
              <span
                style="color: #4f9dec;cursor: pointer;"
                @click="updates(scope.row)"
              >{{ scope.row.phone ? scope.row.phone : '未绑定' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="isVirtualUser" label="是否系统用户" width="150">
            <template slot-scope="scope">
              <span v-if="scope.row.isVirtualUser == 'true'">是</span>
              <span v-else>否</span>
            </template>
          </el-table-column>
          <el-table-column prop="weChatId" label="微信号" width="120">
            <template slot-scope="scope">
              <span>{{ scope.row.weChatId ? scope.row.weChatId : '未授权' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="members" label="会员等级" width="100"></el-table-column>
          <el-table-column prop="weChatId" label="会员到期时间" width="120">
            <template slot-scope="scope">
              <span>{{ scope.row.memberTimeEnd ? scope.row.memberTimeEnd : '无' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="gradeIndex" label="团长等级" width="100">
            <template slot-scope="scope">
              <span>{{ gradeLevelToText(scope.row.gradeIndex) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="注册时间" width="160"></el-table-column>
          <el-table-column prop="money" label="钻石"></el-table-column>
          <el-table-column prop="jiFen" label="金币"></el-table-column>
          <el-table-column fixed="right" prop="status " label="状态">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                @change="change(scope.row.status, scope.row.userId)"
                :active-value="openValue"
                :inactive-value="closeValue"
                active-color="#13ce66"
                inactive-color="#ff4949"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="100">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="updates(scope.row)">用户详情</el-button>
              <el-button size="mini" type="primary" @click="amendGrade(scope.row)">修改团长</el-button>
              <el-button size="mini" type="primary" @click="amendMember(scope.row)">修改会员</el-button>
              <el-button
                :disabled="!isAuth('userList:delete')"
                size="mini"
                type="danger"
                @click="deleteuser(scope.row)"
              >删除用户</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="text-align: center;margin-top: 10px;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="size"
            :current-page="page"
            layout="total,sizes, prev, pager, next"
            :total="tableData.totalElements"
          ></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="代理用户" name="sixth">
        <div style="margin:2% 0;display: inline-block;">
          <span>手机号:</span>
          <el-input
            style="width: 150px;"
            @keydown.enter.native="select"
            clearable
            placeholder="请输入手机号"
            v-model="phone"
          ></el-input>&nbsp;&nbsp;&nbsp;&nbsp;
          <span>登录名:</span>
          <el-input
            style="width: 150px;"
            @keydown.enter.native="select"
            clearable
            placeholder="请输入登录名"
            v-model="userName"
          ></el-input>&nbsp;&nbsp;&nbsp;&nbsp;
          <span>代理等级:</span>
          <el-select
            v-model="gradeIndex"
            placeholder="代理等级"
            style="width:150px;"
            @change="selectTrigger(sort)"
          >
            <el-option
              v-for="item in gradeIndexs"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>&nbsp;&nbsp;&nbsp;&nbsp;
          <span>排序:</span>
          <el-select
            v-model="sort"
            placeholder="请选择排序方式"
            style="width:150px;"
            @change="selectTrigger(sort)"
          >
            <el-option
              v-for="item in sorts"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div style="display: inline-block;">
          <el-button
            style="margin-left:15px;"
            size="mini"
            type="primary"
            icon="document"
            @click="select"
          >查询</el-button>
          <el-button
            style="margin-left:15px;"
            size="mini"
            type="primary"
            icon="document"
            @click="cleans"
          >重置</el-button>
          <el-button
            style="margin-left:15px;"
            size="mini"
            type="primary"
            icon="document"
            @click="refresh"
          >刷新</el-button>
        </div>
        <el-table v-loading="tableDataLoading" :data="tableData.content">
          <el-table-column prop="userId" label="编号"></el-table-column>
          <el-table-column prop="headImg" label="头像" width="120">
            <template slot-scope="scope">
              <div v-if="scope.row.headImg == '' || scope.row.headImg == null">
                <img src="~@/assets/img/avatar.png" alt width="60" height="60" />
              </div>
              <div v-else>
                <img :src="scope.row.headImg" alt width="60" height="60" />
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="userName" label="登录名">
            <template slot-scope="scope">
              <span>{{ scope.row.userName ? scope.row.userName : '未设置' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="nickName" label="微信昵称">
            <template slot-scope="scope">
              <span>{{ scope.row.nickName ? scope.row.nickName : '未授权' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="relationId" label="会员编号">
            <template slot-scope="scope">
              <span>{{ scope.row.isInvitation === 0 ? '未授权' : scope.row.relationId ? scope.row.relationId : '未绑定' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="invitation" label="邀请人" width="120">
            <template slot-scope="scope">
              <span
                style="color: #4f9dec;cursor: pointer;"
                @click="updates(scope.row)"
              >{{ scope.row.invitation ? scope.row.invitation : '未设置' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="手机号" width="150">
            <template slot-scope="scope">
              <span
                style="color: #4f9dec;cursor: pointer;"
                @click="updates(scope.row)"
              >{{ scope.row.phone ? scope.row.phone : '未绑定' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="isVirtualUser" label="是否系统用户" width="150">
            <template slot-scope="scope">
              <span v-if="scope.row.isVirtualUser == 'true'">是</span>
              <span v-else>否</span>
            </template>
          </el-table-column>
          <el-table-column prop="weChatId" label="微信号" width="120">
            <template slot-scope="scope">
              <span>{{ scope.row.weChatId ? scope.row.weChatId : '未授权' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="members" label="会员等级" width="100"></el-table-column>
          <el-table-column prop="weChatId" label="会员到期时间" width="120">
            <template slot-scope="scope">
              <span>{{ scope.row.memberTimeEnd ? scope.row.memberTimeEnd : '无' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="gradeIndex" label="团长等级" width="100">
            <template slot-scope="scope">
              <span>{{ gradeLevelToText(scope.row.gradeIndex) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="注册时间" width="160"></el-table-column>
          <el-table-column prop="money" label="钻石"></el-table-column>
          <el-table-column prop="jiFen" label="金币"></el-table-column>
          <el-table-column fixed="right" prop="status " label="状态">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                @change="change(scope.row.status, scope.row.userId)"
                :active-value="openValue"
                :inactive-value="closeValue"
                active-color="#13ce66"
                inactive-color="#ff4949"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="100">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="updates(scope.row)">用户详情</el-button>
              <el-button size="mini" type="primary" @click="amendGrade(scope.row)">修改团长</el-button>
              <el-button size="mini" type="primary" @click="amendMember(scope.row)">修改会员</el-button>
              <el-button
                :disabled="!isAuth('userList:delete')"
                size="mini"
                type="danger"
                @click="deleteuser(scope.row)"
              >删除用户</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="text-align: center;margin-top: 10px;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="size"
            :current-page="page"
            layout="total,sizes, prev, pager, next"
            :total="tableData.totalElements"
          ></el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- 修改团长等级 -->
    <el-dialog title="修改团长等级" :visible.sync="dialogFormVisible" center>
      <div style="margin-bottom: 10px;">
        <span style="width: 200px;display: inline-block;text-align: right;">等级：</span>
        <el-select v-model="gradeIndex" placeholder="请选择团长等级" style="width:45%;">
          <el-option
            v-for="item in gradeIndexs"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="gradeNoticeTo()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改会员等级 -->
    <el-dialog title="修改会员等级" :visible.sync="dialogFormVisible2" center>
      <div style="margin-bottom: 10px;">
        <span style="width: 200px;display: inline-block;text-align: right;">等级：</span>
        <el-select v-model="memberId" placeholder="请选择会员等级" style="width:45%;">
          <el-option
            v-for="item in memberIds"
            :key="item.id"
            :label="item.memberName"
            :value="item.id"
          ></el-option>
        </el-select>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="memberNoticeTo()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 添加系统用户 -->
    <el-dialog title="添加用户" :visible.sync="dialogFormVisible1" center>
      <div style="margin-bottom: 10px;">
        <span style="width: 200px;display: inline-block;text-align: right;">用户名：</span>
        <el-input style="width:50%;" v-model="userName" type="text" placeholder="请输入用户名"></el-input>
      </div>
      <div style="margin-bottom: 10px;">
        <span style="width: 200px;display: inline-block;text-align: right;">手机号：</span>
        <el-input
          style="width:50%;"
          v-model="phone"
          show-word-limit
          maxlength="11"
          placeholder="请输入手机号"
        ></el-input>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="inviteNoticeTo()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      openValue: 1,
      closeValue: 2,
      size: 5,
      page: 1,
      sort: 'createTime',
      sorts: [{
        label: '默认',
        value: 'createTime'
      },
      {
        label: '钻石',
        value: 'money'
      },
      {
        label: '金币',
        value: 'jiFen'
      }
      ],
      memberId: '',
      memberIds: [],
      phone: '',
      isVirtualUser: '',
      members: [],
      nickName: '',
      memberGrade: '',
      userName: '',
      title: '',
      money: '',
      id: '',
      member: '',
      agent: '',
      gradeIndex: '',
      gradeIndexs: [{
        value: 0,
        label: '游客'
      },
      {
        value: 1,
        label: '普通代理'
      }, {
        value: 2,
        label: '高级代理'
      }, {
        value: 3,
        label: '合伙人'
      }
      ],
      tableDataLoading: true,
      dialogFormVisible: false,
      dialogFormVisible1: false,
      dialogFormVisible2: false,
      activeName: 'first',
      tableData: [],
    }
  },
  methods: {
    gradeLevelToText(level) {
      let list = this.gradeIndexs;
      for (let i = 0; i < list.length; i++) {
        const e = list[i];
        if (e.value === level) return e.label
      }
    },
    handleClick(tab, event) {
      this.member = ''
      this.memberGarde = ''
      this.isVirtualUser = ''
      this.agent = ''
      this.gradeIndex = ''
      switch (tab._props.label) {
        case '全部用户':
          break;
        case '普通用户':
          this.member = '0'
          break;
        case '会员用户':
          this.member = '1'
          break;
        case '系统用户':
          this.isVirtualUser = 'true'
          break;
        case '代理用户':
          this.agent = 1
          break;
      }
      this.dataSelect()
      this.getMember()
    },

    handleSizeChange(val) {
      this.size = val
      this.dataSelect()
    },
    handleCurrentChange(val) {
      this.page = val
      this.dataSelect()
    },
    // select自动选择
    selectTrigger() {
      this.dataSelect()
    },
    // 查询
    select() {
      this.page = 1
      this.size = 5
      this.dataSelect()
    },
    // 重置
    cleans() {
      this.phone = ''
      this.userName = ''
      this.memberGrade = ''
      this.dataSelect()
    },
    // 刷新
    refresh() {
      this.page = 1
      this.size = 5
      this.dataSelect()
    },
    // 状态
    change(val, id) {
      this.$http({
        url: this.$http.adornUrl2('/user/updateStatus'),
        method: 'get',
        params: this.$http.adornParams({
          'status': val,
          'id': id
        })
      }).then(({
        data
      }) => {
        this.$message({
          message: '操作成功',
          type: 'success',
          duration: 1500,
          onClose: () => {
            this.dataSelect()
          }
        })
      })
    },
    // 详情跳转
    updates(row) {
      this.$router.push({
        path: '/userDetail',
        query: {
          userId: row.userId
        }
      })
    },
    // 添加系统用户
    inviteadd() {
      this.dialogFormVisible1 = true
    },
    // 添加系统用户
    inviteNoticeTo() {
      if (this.userName == '') {
        this.$notify({
          title: '提示',
          duration: 1800,
          message: '请输入用户名',
          type: 'warning'
        });
        return
      }
      if (this.phone == '') {
        this.$notify({
          title: '提示',
          duration: 1800,
          message: '请输入手机号',
          type: 'warning'
        });
        return
      }
      this.$http({
        url: this.$http.adornUrl2('/user/virtualUser'),
        method: 'get',
        params: this.$http.adornParams({
          'userName': this.userName,
          'phone': this.phone,
        })
      }).then(({ data }) => {
        if (data.status == 0) {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.userName = ''
              this.phone = ''
              this.dialogFormVisible1 = false
              this.dataSelect()
            }
          })
        } else {
          this.$message({
            message: data.msg,
            type: 'error',
            duration: 1500,
            onClose: () => {
              this.userName = ''
              this.phone = ''
              this.dialogFormVisible1 = false
              this.dataSelect()
            }
          })
        }

      })
    },
    //删除用户
    deleteuser(row) {
      this.$confirm(`确定删除此条信息?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl2('/user/delete'),
          method: 'get',
          params: this.$http.adornParams({
            'id': row.userId
          })
        }).then(({
          data
        }) => {
          this.$message({
            message: '删除成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.name = ''
              this.dataSelect()
            }
          })
        })
      }).catch(() => { })
    },
    // 修改团长等级
    amendGrade(row) {
      if (row.gradeIndex == null) {
        this.gradeIndex = 0
      } else {
        this.gradeIndex = parseInt(row.gradeIndex)
      }
      this.dialogFormVisible = true
      this.userId = row.userId
    },
    // 修改团长等级
    gradeNoticeTo() {
      this.$http({
        url: this.$http.adornUrl2('/userInfo/updateGrades'),
        method: 'get',
        params: this.$http.adornParams({
          'userId': this.userId,
          'gradeIndex': this.gradeIndex,
        })
      }).then(({
        data
      }) => {
        if (data.status == 0) {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.gradeIndex = ''
              this.dialogFormVisible = false
              this.dataSelect()
            }
          })
        } else {
          this.$message({
            message: data.msg,
            type: 'error',
            duration: 1500,
            onClose: () => {
              this.gradeIndex = ''
              this.dialogFormVisible = false
              this.dataSelect()
            }
          })
        }
      })
    },
    // 修改会员等级
    amendMember(row) {
      this.userId = row.userId
      this.dialogFormVisible2 = true
    },
    //修改团长等级
    memberNoticeTo() {
      if (this.memberId == '') {
        this.$notify({
          title: '提示',
          duration: 1800,
          message: '请选择会员等级',
          type: 'warning'
        });
        return
      }
      this.$http({
        url: this.$http.adornUrl2('/user/setMember'),
        method: 'get',
        params: this.$http.adornParams({
          'userId': this.userId,
          'memberId': this.memberId,
        })
      }).then(({
        data
      }) => {
        if (data.status == 0) {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.dialogFormVisible2 = false
              this.dataSelect()
            }
          })
        } else {
          this.$message({
            message: data.msg,
            type: 'error',
            duration: 1500,
            onClose: () => {
              this.dialogFormVisible2 = false
              this.dataSelect()
            }
          })
        }
      })
    },
    // 获取数据列表
    dataSelect() {
      let page = this.page - 1
      this.tableDataLoading = true
      this.$http({
        url: this.$http.adornUrl2('/user/list'),
        method: 'get',
        params: this.$http.adornParams({
          'page': page,
          'size': this.size,
          'phone': this.phone,
          'member': this.member,
          'userName': this.userName,
          'memberGrade': this.memberGrade,
          'sort': this.sort,
          'isVirtualUser': this.isVirtualUser,
          'agent': this.agent,
          'gradeIndex': this.gradeIndex
        })
      }).then(({
        data
      }) => {
        this.tableDataLoading = false
        let returnData = data.data
        this.tableData = returnData
        console.log(this.tableData);
      })
    },
    //获取团长等级数据
    getMember() {
      this.$http({
        url: this.$http.adornUrl2('/memberDetails/selectMemberList'),
        method: 'get',
        params: this.$http.adornParams({
        })
      }).then(({ data }) => {
        this.members = data.data
      })
    },
    // 获取团长级别
    getGradeIndexs() {
      this.$http({
        url: this.$http.adornUrl2('/commission/levelList'),
        method: 'get',
        params: this.$http.adornParams({})
      }).then(({ data }) => {
        const { data: dataArr } = data;
        const arr = []
        for (let i = 0; i < dataArr.length; i++) {
          const e = dataArr[i];
          arr.push({ label: e.aliasName, value: e.level });
        }
        arr.sort((a, b) => {
          return a.value - b.value;
        })
        this.gradeIndexs = arr;
      })
    },
    // 获取会员等级列表
    memberSelect() {
      this.$http({
        url: this.$http.adornUrl2('/memberDetails/selectMemberList'),
        method: 'get',
        params: this.$http.adornParams({
        })
      }).then(({ data }) => {
        this.memberIds = data.data
      })
    }
  },
  mounted() {
    this.getGradeIndexs()
    this.dataSelect()
    this.getMember()
    this.memberSelect()
  }
}
</script>

<style scoped="scoped">
.el-button + .el-button {
  margin-left: 0 !important;
  margin-top: 5px !important;
}
</style>
